<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{getLangText(label.radar)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
                <md-field>
					<label>{{getLangText(label.startAngle)}}</label>
					<md-input v-model="radar.startAngle"></md-input>
				</md-field>

                <md-field>
					<label>{{getLangText(label.radius)}}</label>
					<md-input v-model="radar.radius"></md-input>
				</md-field>
                <div style="display:flex;">
                    <md-field style="width:135px;">
					<label>{{getLangText(label.center)}}X</label>
					<md-input v-model="radar.center[0]"></md-input>
				</md-field>
                <md-field style="width:135px;margin-left:8px;">
					<label>{{getLangText(label.center)}}Y</label>
					<md-input v-model="radar.center[1]"></md-input>
				</md-field>

                </div>
				
				<md-field>
					<label>{{getLangText(label.shape)}}</label>
					<md-select v-model="radar.shape">
						<md-option value="polygon">{{getLangText(label.polygon)}}</md-option>
						<md-option value="circle">{{getLangText(label.circle)}}</md-option>
					</md-select>
				</md-field>
				
				<md-field>
					<label>{{getLangText(label.nameGap)}}</label>
					<md-input v-model="radar.nameGap"></md-input>
				</md-field>
				<div class="table-row-item">
					<span>{{getLangText(label.scale)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="radar.scale"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.splitNumber)}}</label>
					<md-input v-model="radar.splitNumber"></md-input>
				</md-field>
				
			</div>
			<text-style
				:lang-type="langType"
				:text-name="getLangText(label.name)"
				@text-style-result="onTextStyle"
				:option="radar.name"
			></text-style>

			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.axisLine)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="radar.axisLine.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<div class="table-row-item">
					<span>{{getLangText(label.onZero)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="radar.axisLine.onZero"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.symbol)}}</label>
					<md-select v-model="radar.axisLine.symbol">
						<md-option value="none">{{getLangText(label.none)}}</md-option>
						<md-option value="arrow">{{getLangText(label.arrow)}}</md-option>
                        <!-- <md-option :value="['none','arrow']">{{getLangText(label.endArrow)}}</md-option> -->
					</md-select>
				</md-field>
				<div style="display:flex;">
					<md-field style="width:135px;display:inline-flex;">
						<label>{{getLangText(label.symbolSize)}}</label>
						<md-input v-model="radar.axisLine.symbolSize[0]"></md-input>
					</md-field>

					<md-field style="width:135px;display:inline-flex;margin-left:8px;">
						<label>{{getLangText(label.symbolSize)}}</label>
						<md-input v-model="radar.axisLine.symbolSize[1]"></md-input>
					</md-field>
				</div>
				
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.axisLine)"
				@line-style-result="onRadarLine"
				:option="radar.axisLine.lineStyle"
			></line-style>
			
			
			
			<div class="table-row-item" style="padding:0 8px;">
					<span>{{getLangText(label.splitLine)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="radar.splitLine.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.splitLine)"
				@line-style-result="onSplitLine"
				:option="radar.splitLine.lineStyle"
			></line-style>
			<div class="table-row-item"  style="padding:0 8px;">
					<span>{{getLangText(label.splitArea)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="radar.splitArea.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
			<area-style
				:lang-type="langType"
				:area-name="getLangText(label.splitArea)"
				@area-style-result="onSplitArea"
				:option="radar.splitArea.areaStyle"
			></area-style>
		</div>
	</div>
</template>
<script>
	import TextStyle from "@/components/comp/TextStyle";
	import LineStyle from "@/components/comp/LineStyle";
	import AreaStyle from "@/components/comp/AreaStyle";
	export default {
		name: "Radar",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
						
			option: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		components: {
			"text-style": TextStyle,
			"line-style": LineStyle,
			"area-style": AreaStyle
		},
		data: () => ({
			label: {
				radar: { zh: "雷达坐标轴", en: " RadarAxis" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },				
				name: { zh: "轴名称", en: "name" },
				startAngle: { zh: "开始角度", en: "startAngle" },
				center: { zh: "中间", en: "center" },
                radius:{zh:"半径",en:"raduis"},
                polygon:{zh:"多边形",en:"polygon"},
                circle:{zh:"圆形",en:"circle"},
                shape:{zh:"形状",en:"shape"},
				nameGap: { zh: "名称与轴线距离", en: "nameGap" },
				
				scale: { zh: "脱离0值比例", en: "scale" },
				splitNumber: { zh: "分割段数", en: "splitNumber" },
				
				axisLine: { zh: "轴线", en: "axisLine" },
				onZero: { zh: "包含0刻度", en: "onZero" },
				symbol: { zh: "轴线箭头", en: "symbol" },
				symbolSize: { zh: "轴线箭头大小", en: "symbolSize" },
				symbolOffset: { zh: "轴线箭头偏移", en: "symbolOffset" },
				none: { zh: "无", en: "none" },
                arrow: { zh: "箭头", en: "arrow" },
                endArrow:{zh:"末端箭头",en:"endArrow"},
								
				splitLine: { zh: "分隔线", en: "splitLine" },
				splitArea: { zh: "分隔区域", en: "splitArea" },
			},
			isShow: false,
			radar: {
				show: true,
                radius:'75%',
                startAngle:90,
                nameGap:15,
                center:['50%','50%'],
                scale: false,
                name:{},
				axisLine: {
					show: true,
					onZero: true,
					symbol: "none",
					symbolSize: [10, 15],
					lineStyle: {}
				},				
				splitLine: {
					show: true,
					interval: "auto",
					lineStyle: {}
				},
				splitArea: {
					show: false,
					interval: "auto",
					areaStyle: {}
				}
			},
			originOption:'',
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				}
			},
			radar:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					this.$emit("radar-result", JSON.parse(JSON.stringify([this.radar])));
				}
			}
		},
		methods: {
			onTextStyle(result) {
				this.radar.name= result;
			},
			onRadarLine(result) {
				this.radar.axisLine.lineStyle = result;
			},
			
			onSplitLine(result) {
				this.radar.splitLine.lineStyle = result;
			},
			onSplitArea(result) {
				this.radar.splitArea.areaStyle = result;
			},
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("radar-result", JSON.parse(JSON.stringify([this.radar])));
				}
			},
			parseObj() {
				if (this.option instanceof Array && this.option.length == 1) {
					this.isParse=true;
					var option = this.option[0];
					for (var key in option) {
						this.radar[key] = option[key];						
					}
					var that=this;
					setTimeout(() => {
						that.isParse=false;
					}, 100);
				}				
			},
			colseOption() {
				this.isShow = false;
				var that=this;
				if (this.originOption!=JSON.stringify(this.radar)) {
					setTimeout(() => {
						that.$emit("radar-result", [that.radar]);
					}, 50);
					
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
